{extend name="other/public"}
{block name='css'}
  <style>
    img.c1{max-width: 150px;max-height: 66px;margin: 0 auto;}
    .layui-table .c2{text-align: center;}
    .c3{padding-left: 0;text-align: center;}
    .layui-form-label{width: auto;padding-left: 0;}
    .c4{float: right;margin-top: 3px;}
    .c5{padding:20px 20px 5px;}
    .c5 span{display: inline-block;margin-right: 10px;}
    .c6{height: 66px;}
  </style>
{/block}

{block name='content'}
<div class="layui-fluid" id="app" v-cloak>
  <div class="layui-card">
    <div class="layui-card-header u-flex">
      <div>广告列表</div>
      <div>
        {eq name="is_super" value="1"}
        <a href="{:url('customized.ad/form_data')}?type=1"><button class="layui-btn layuiadmin-btn-list">添加单图广告</button></a>
        <a href="{:url('customized.ad/form_data')}?type=2"><button class="layui-btn layuiadmin-btn-list">添加多图广告</button></a>
        {/eq}
      </div>
    </div>
    <div class="layui-form layui-card-header layuiadmin-card-header-auto"  lay-filter="anForm">

    <div class="layui-card-body">
      <form class="layui-form" action="">
        <table class="layui-table">
          <colgroup>
            <col width="50">
            <col width="150">
            <col>
            <col width="150">
            <col width="150">
            <col width="150">
            <col width="150">
          </colgroup>
          <thead>
            <tr>
              <th class="c2">ID</th>
              <th class="c2">图片</th>
              <th>名称</th>
              <th class="c2">类型</th>
              <th class="c2">状态</th>
              <th class="c2">更新时间</th>
              <th class="c2">操作</th>
            </tr> 
          </thead>
          <tbody v-if="listData.length > 0">
            <tr v-for="(v,index) in listData" :key="index">
              <td class="c2">{{v.id}}</td>
              <td class="c2"><div class="c6 u-flex"><img class="c1" :src="v.imgs[0].img" alt=""></div></td>
              <td>{{v.title}}</td>
              <td class="c2">{{v.type == '1'?'单图':'多图'}}</td>
              <td class="c2">
                <input type="checkbox" :value="v.id" lay-filter="is_show" name="is_show" lay-skin="switch"  lay-text="显示|隐藏" v-if="Number(v.is_show) == 1" checked>
                <input type="checkbox" :value="v.id" lay-filter="is_show" name="is_show" lay-skin="switch"  lay-text="显示|隐藏" v-else>
              </td>
              <td class="c2">{{v.up_time}}</td>
              <td class="c2">
                <a :href="'{:url('form_data')}?id='+v.id+'&type='+v.type" class="layui-btn layui-btn-normal layui-btn-sm">编辑</a>
                {eq name="is_super" value="1"}
                <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" @click="delData(v.id,index)">删除</button>
                {/eq}
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="8" class="c2" style="line-height: 100px;">没有找到相关数据</td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>
{/block}

{block name='js'}
<script>
  const listData = {$listData|raw};
  const anVue = new Vue({
    el:"#app",
    data:{
      listData:listData
    },
    methods: {
      delData(id,index){
        let _this = this;
        layer.msg('删除后将不能恢复', {
          time: 0 //不自动关闭
          ,btn: ['直接删除', '取消']
          ,yes: function(index){
            layer.close(index);
            $.post("{:url('del_data')}",{id},(res)=>{
              if(res.code==1){
                _this.listData.splice(index, 1);
              }
            },'json')
          }
        });
      },
    },
  })
  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','form','laypage'], function(){
    var form = layui.form;
    var $ = layui.$

    //监听提交
    form.on('submit(search)', function(data){
      if(data.field.type != '' || data.field.title != ''){
        location.href = "{:url('list_data')}?search_type="+data.field.type+"&search="+data.field.title
        return false;
      }else{
        layer.msg('请操作需要筛选的类型')
      }
    });

    form.on('switch(is_show)', function(data){
      $.post("{:url('disable_data')}",{id:data.value,is_show:data.elem.checked?1:0},function(res){
        if(res.code == 1){
          layer.msg('操作成功')
        }else{
          layer.msg(res.msg)
        }
      })
    }); 

  });
  </script>
{/block}